<template>
  <div class="list-page">
    <Row>
      <div class="toolbar">
        <Modal
          title="编辑规则"
          v-model="addrule"
          class-name="vertical-center-modal"
          @on-cancel="cancel"
          :width="800"
          >
          <p slot="header">
            <span>建议详情</span>
          </p>
          <div style="height: 400px">
            <div style="height: 250px">
              <Card :bordered="false" :dis-hover="true" :padding="15" >
                <b slot="title" style="color: #666;">
                <span
                  class="iconfont icon-changyongtubiao-xianxingdaochu-zhuanqu-"
                  style="font-size: 20px;"
                ></span> 基本信息
                </b>
                <div>
                  <b class="label-left">
                    联系人:
                  </b>
                  <div class="label-left1">
                    {{this.detail.name}}
                  </div>
                  <b class="label-left">
                    联系电话
                  </b>
                  <div class="label-right">
                    {{this.detail.tel}}
                  </div>
                </div>
                <div>
                  <b class="label-left">
                    建议时间:
                  </b>
                  <div class="label-right-text1">
                    {{this.detail.applyTime}}
                  </div>
<!--                  <b class="label-left">-->
<!--                    联系地址:-->
<!--                  </b>-->
<!--                  <div class="label-right">-->
<!--                    {{this.detail.address}}-->
<!--                  </div>-->
                </div>
                <div>
                  <b class="label-left-text">
                    建议内容:
                  </b>
                  <div class="label-right-text">
                    <p>{{this.detail.suggestion}}</p>
                  </div>
                </div>
              </Card>
            </div>
            <div>
              <Card :bordered="false" :dis-hover="true" :padding="10" >
                <b slot="title" style="color: #666;">
                <span
                  class="iconfont icon-changyongtubiao-xianxingdaochu-zhuanqu-"
                  style="font-size: 20px;"
                ></span> 图片
                </b>
                <div style="text-align: left">
                  <div class="demo-upload-list" v-for="(item, index) in fileList" :key="index" style="left: 0">
                    <template v-if="item.status1 === 'finished'">
                      <img :src="item.imageurl">
                      <div class="demo-upload-list-cover">
                        <Icon type="ios-eye-outline" @click.native="handleView(item.imageurl)"></Icon>
                      </div>
                    </template>
                    <Upload :action="'null'">
                      <Modal title="View Image" v-model="visible" :width="wid">
                        <img :src="imgUrl" v-if="visible">
                      </Modal>
                      <Modal title="View Image" v-model="visible1" :width="wid">
                        <img :src="imgUrl" v-if="visible1" :width ="wid1">
                      </Modal>
                    </Upload>
                  </div>
                </div>
              </Card>
            </div>
          </div>
          <div slot="footer">
            <AppButton
              ref="save"
              type="primary"
              @click="cancel"
            >确定</AppButton
            >
          </div>
        </Modal>

        <Input
          placeholder="请输入要查询的联系人"
          v-model="bloc.form.name"
          style="width: 180px; margin-right: 10px"
        />
        <Input
          placeholder="请输入要查询的联系电话"
          v-model="bloc.form.phone"
          style="width: 180px; margin-right: 10px"
        />
        <DatePicker
          type="daterange"
          placeholder="建议时间"
          format="yyyy/MM/dd"
          v-model="bloc.form.date"
          :editable="false"
          style="width: 200px; margin-right: 10px"
        ></DatePicker>

        <Button
          type="primary"
          icon="ios-search"
          style="margin: 0 10px"
          size="default"
          @click="bloc.load(1, bloc.paged.pageSize)"
        >查询
        </Button>
        <Button
          icon="md-refresh"
          style="margin-right: 10px"
          size="default"
          @click="bloc.reset()"
        >重置</Button
        >
      </div>
    </Row>
    <Row>
      <Table
        border
        :loading="bloc.loading"
        :columns="columns"
        highlight-row
        :data="bloc.paged.items"
      >
        <template slot-scope="{row}" slot="state">
            <span slot="reference" v-if="row.state === '1'" style ='margin-right: 8px;display: flex;justify-content: center;align-items: center'>
              <i class="dotClass" style="background-color: springgreen"></i>
              <div style="text-indent: 1ex;">已读</div>
            </span>
          <span slot="reference" v-if="row.state === '0'" style ='margin-right: 8px;display: flex;justify-content: center;align-items: center'>
              <i class="dotClass" style="background-color: red" ></i>
              <div style="text-indent: 1ex;">未读</div>
            </span>
        </template>

        <template slot-scope="{ row }" slot="action">
          <div style="white-space: nowrap">
            <Button
              size="small"
              @click="handleAdd(row)"
              v-if="Validation.check(Resources.POSTSALE)"
              type="info"
            >详情
            </Button>
          </div>
        </template>
        <slot name="footer" slot="footer">
          <Page
            show-elevator
            show-total
            show-sizer
            :total="bloc.paged.itemCount"
            :current="bloc.paged.pageIndex"
            :page-size="bloc.paged.pageSize"
            :page-size-opts="[15, 30, 50, 100]"
            @on-change="(val) => bloc.load(val, bloc.paged.pageSize)"
            @on-page-size-change="(val) => bloc.load(bloc.paged.pageIndex, val)"
          />
        </slot>
      </Table>
    </Row>
  </div>

</template>

<script lang="ts">
    import {Component, Vue} from 'vue-property-decorator';
    import { Route } from 'vue-router';
    import { FormBloc } from '@/view/service/sug/FormBloc';
    import { formatDate } from '@/base/util/Dates';
    import { Validation } from '@/base/Validation';
    import { Resources } from '@/base/Resources';
    import { AppButton } from '@/type/AppButton';
    import CompanySeletorSingle from '@/component/CompanySeletorSingle.vue';

    const columns = (bloc: FormBloc) => [
        {
            title: '建议内容',
            key: 'suggestion',
            // render: (h: any, params: any) => {
            //     return h('span', {
            //         domProps: {
            //             innerText:
            //                params.row.suggestion.length > 8
            //                    ? params.row.suggestion.substr(0, 8) + '......'
            //                    : params.row.suggestion
            //         }
            //     });
            // },
            width: 280,
            align: 'left',
            tooltip: true
        },
        {
            title: '建议时间',
            render: (h: any, params: any) => {
                return h('span', {
                    domProps: {
                        innerText: formatDate(
                            new Date(params.row.applyTime),
                            'yyyy-MM-dd hh:mm'
                        )
                    }
                });
            },
            width: 160,
            align: 'left',
            tooltip: true
        },
        {
            title: '联系人',
            key: 'name',
            align: 'left',
            minWidth: 100,
            tooltip: true
        },
        {
            title: '联系电话',
            key: 'tel',
            align: 'left',
            minWidth: 100,
            tooltip: true
        },
        // {
        //     title: "联系地址",
        //     key: "address",
        //     align: "left",
        //     minWidth: 100,
        //     tooltip: true,
        // },

        // {
        //     title: "状态",
        //     key: "state",
        //     render: (h: any, params: any) => {
        //         if (params.row.state === 0){
        //             return h("span", {
        //                slot-scope:{
        //
        //             }
        //             },[h("i",{
        //                     'class':{
        //                         "dotClass":true
        //                     },
        //                     style:{
        //                         width:10,
        //                         height:10,
        //                         backgroundColor : "springgreen"
        //                     }
        //                 }
        //                 )]
        //             );
        //         }else{
        //
        //         }
        //     },
        //     align: "left",
        //     minWidth: 200,
        //     tooltip: true,
        // },
        {
            title: '状态',
            slot: 'state',
            width: 150,
            align: 'left',
            fixed: 'right'
        },
        {
            title: '操作',
            slot: 'action',
            width: 150,
            align: 'left',
            fixed: 'right'
        }
    ];

    @Component({
        components: {CompanySeletorSingle
        }
    })
    export default class extends Vue {
        beforeRouteEnter(to: Route, from: Route, next: (vm: any) => void) {
            next((vm) => {
                vm.bloc.load(vm.bloc.paged.pageIndex, vm.bloc.paged.pageSize)
                    .catch((e) => {
                        vm.$Message.error('加载错误');
                    });
            });
        }
        bloc: FormBloc = new FormBloc();
        Validation = Validation;
        Resources = Resources;
        columns = columns(this.bloc);

        addrule: any = false;
        detail: any = {
            name: '',
            // address: '',
            suggestion: '',
            tel: 0,
            applyTime: '',
            iamges: ''
        };
        cancel() {
            this.addrule = false;
        }
        $refs!: {
            addrule: HTMLFormElement;
            editSort: HTMLFormElement;
            save: AppButton;
            cancel:AppButton;
            edit: AppButton;
        };

        handleAdd(item) {
            this.addrule = true;
            item.state = '1';
            this.detail.applyTime = item.applyTime;
            this.detail.tel = item.tel;
            this.detail.name = item.name;
            this.detail.suggestion = item.suggestion;
            this.bloc.getdetail(item.aid, item.id).then(res => {
               // this.detail.address = res.errMsg.address.address;
               this.bloc.fileList = [];
               if (res.errMsg.images) {
                   res.errMsg.images.map(x => this.bloc.fileList.push(x));
               }
            });
        }

        imgUrl = '';
        wid = 1000;
        wid1= 2000;
        visible = false;
        visible1 = false;
        get fileList() {
            return this.bloc.fileList.map(x => {
                return {'name': 'name', 'imageurl': x, 'status1': 'finished'};
            });
        }
        handleView(url) {
            let iii = new Image();
            iii.src = url;
            this.wid = iii.width + 32;
            if (this.wid > 1300) {
                this.wid = 1300;
                this.wid1 = 1300 - 32;
                this.imgUrl = url;
                this.visible1 = true;
            } else {
                this.imgUrl = url;
                this.visible = true;
            }
        }

        private row: any;
        changeRoute() {
            this.$router.push({
                path: '/service/nav/maitainregulation'
            });
        }

    }

</script>

<style lang="less">
  .ivu-card .ivu-card-head{
    height: 35px;
  }
  .dotClass {
    width:10px;
    height:10px;
    border-radius: 50%;
    display: block;
    margin-left: 10px;  //这个用于圆点居中
  }

  .label-left{
    width: 10%;float: left; border: 1px #ECEFF4 solid;background-color: #f2f2f2;
    line-height: 40px;text-align: center;
  }
  .label-left1{
    width: 40%;float: left; border: 1px #ECEFF4 solid;
    line-height: 40px;text-indent: 1em;
  }
  .label-right{
    width: 40%;float: right;border: 1px #ECEFF4 solid;line-height: 40px;text-indent: 1em;
  }
  .label-left-text{
    width: 10%;float: left; border: 1px #ECEFF4 solid;background-color: #f2f2f2;
    line-height: 90px;text-align: center;
  }
  .label-right-text1{
    width: 90%;float: left; border: 1px #ECEFF4 solid;
    line-height: 40px;text-indent: 1em;
  }
  .label-right-text{
    width: 90%;float: right;border: 1px #ECEFF4 solid;height: 90px;
    text-align: left;overflow:auto;display: flex;justify-content: left;
    align-items: center;
  }
  .label-right-text p{
    text-indent: 1em;
    text-align: left;
    display: inline-block;
  }
</style>
